<template>
  <div>
    <div>
      <el-button circle @click="add('+')">+</el-button>
      <el-button circle @click="add('-')">-</el-button>
      <el-button circle @click="add('*')">*</el-button>
      <el-button circle @click="add('/')">/</el-button>
      <el-button circle @click="add('(')">(</el-button>
      <el-button circle @click="add(')')">)</el-button>
      <el-button circle @click="add('x')">过程项</el-button>
      <el-button circle @click="add('y')">数字项</el-button>
      <el-button circle @click="del">后退</el-button>
    </div>
    <div>
      <draggable v-model="list" chosenClass="chosen" forceFallback="true" group="people" animation="200"
                 @start="onStart" @end="onEnd">
        <transition-group>
          <span v-for="(t,ii) in list" :key="t.i">
            <span v-if="t.type=='过程项'">
              <el-select v-model="t.id" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="100000+item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </span>
            <span v-if="t.type=='数字项'">
              <el-input-number v-model="t.number" :min="0" :max="100" label="请填写" :precision="2"></el-input-number>
            </span>
            <span v-if="t.type=='符号项'">{{ t.value }}</span>
          </span>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: "dragTreeTable",
  components: {
    draggable
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      list: [],
      drag: false

    }
  },
  methods: {
    add(t) {
      if (t == "x") {
        this.list.push(
          {
            i:this.getUUID(),
            type: "过程项",
            id: null,
            name: ""
          }
        )
      } else if (t == "y") {
        this.list.push(
          {
            i:this.getUUID(),
            type: "数字项",
            number: 1
          }
        )
      } else {
        this.list.push(
          {
            i:this.getUUID(),
            type: "符号项",
            value: t
          }
        )
      }
    },
    del() {
      if (this.list.length > 0) {
        this.list.splice(this.list.length - 1, 1);
      }
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    getUUID(len, radix) {
      //获取UUID
      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
        ""
      );
      var uuid = [],
        i;
      radix = radix || chars.length;

      if (len) {
        // Compact form
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
      } else {
        // rfc4122, version 4 form
        var r;

        // rfc4122 requires these characters
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
        uuid[14] = "4";

        // Fill in random data.  At i==19 set the high bits of clock sequence as
        // per rfc4122, sec. 4.1.5
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | (Math.random() * 16);
            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join("");
    }

  }
}
</script>

<style scoped>

</style>
